<template>

  <div class="shopsDetail">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/schemas' }">方案列表</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isEdit">审核方案 #{{id}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>获取方案错误</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">
      <!--<h2>{{// vm.threadMan.name}} {{vm.threadMan.phone}}</h2>-->
      <h3>店铺:{{shop_name}} </h3>
      <h3>销售顾问:{{sales_name}} {{sales_phone}}</h3>
      <h3>申请时间: {{vm.submit_time}}</h3>



      <el-table
        :data="vm.vehicle"
        border
        style="width: 100%">
        <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template>



        <el-table-column

          prop="logo"
          width="120"
          align="center"
        >
          <template slot-scope="scope">

            <div><img class="item-img" width="60px" :src="scope.row.logo" alt=""> </div>

          </template>
        </el-table-column>

        <el-table-column

          prop="model_name"
          label="目标车型">

        </el-table-column>
        <el-table-column

          prop="model_price"
          label="厂商指导价"
          width="120">

        </el-table-column>
        <el-table-column

          prop="market_price"
          label="市场综合价"
          width="120">

        </el-table-column>
        <el-table-column

          prop="retainage_of_evaluation"
          label="1年后残值"
          width="120">

        </el-table-column>



      </el-table>

      <el-table
        :data="vm.custom"
        border
        style="width: 100%">
        <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template>


        <el-table-column

          prop="name"
          label="客户真名"
          width="120">

        </el-table-column>

        <el-table-column

          prop="phone"
          label="客户电话"
          width="200">

        </el-table-column>
        <el-table-column

          prop="id_card_no"
          label="身份证号">

        </el-table-column>
        <el-table-column

          prop="bank_card_no"
          label="银行卡号"
          width="120">

        </el-table-column>
        <el-table-column

          prop="id_card_photo"
          label="身份证照"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.id_card_photo" target="_blank">
              <img class="item-img"  :src="scope.row.id_card_photo">
            </a>
          </template>
        </el-table-column>
        <el-table-column

          prop="driver_license_photo"
          label="驾驶证照"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.driver_license_photo" target="_blank">
              <img class="item-img" :src="scope.row.driver_license_photo">
            </a>
          </template>
        </el-table-column>
        <el-table-column

          prop="bank_card_photo"
          label="银行卡照片"
          width="120">
          <template slot-scope="scope">
            <a :href="scope.row.bank_card_photo" target="_blank">
              <img class="item-img" :src="scope.row.bank_card_photo">
            </a>
          </template>
        </el-table-column>


      </el-table>
      <h1>方案信息</h1>
      <el-form ref="form" :model="form" label-width="140px" style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="采购行情价">

              <el-input disabled v-model="form.schema.market_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">

            <el-form-item label="经销商发票类型">

              <el-input disabled v-model="form.schema.invoice_type"></el-input>
            </el-form-item>
            <el-form-item label="最终落户票">

              <el-input disabled v-model="form.schema.settled_invoice_price"></el-input>
            </el-form-item>

            <el-form-item label="裸车价校验(g)">

              <el-input disabled v-model="form.schema.vehicle_price_validate"></el-input>
            </el-form-item>




          </el-col>
          <el-col :span="8">
            <!--<el-form-item label="最终落户发票价">-->

            <!--<el-input disabled v-model="form.schema.invoice_price"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="开票金额">

              <el-input disabled v-model="form.schema.invoice_price"></el-input>
            </el-form-item>

            <el-form-item label="加融利润">

              <el-input disabled v-model="form.schema.profit_financing"></el-input>
            </el-form-item>
            <el-form-item label="可提高金额(g)">

              <el-input disabled v-model="form.schema.vehicle_price_add_space"></el-input>
            </el-form-item>
            <!--<el-form-item label="差额税费(r)">-->

            <!--<el-input disabled v-model="form.schema.invoice_tax_diff"></el-input>-->
            <!--</el-form-item>-->

          </el-col>
        </el-row>

        <el-row :gutter="12" style="margin-top: 20px">
        <el-col :span="8">
          <el-form-item label="运输费">

            <el-input disabled v-model="form.schema.freight"></el-input>
          </el-form-item>
          <el-form-item label="附加配置">

            <el-input disabled v-model="form.schema.decoration"></el-input>
          </el-form-item>
          <el-form-item label="购置税">

            <el-input disabled v-model="form.schema.purchase_tax"></el-input>
          </el-form-item>
          <el-form-item label="车船税">

            <el-input disabled v-model="form.schema.vav_tax"></el-input>
          </el-form-item>
          <el-form-item label="保险校验(g)" class="el-form-item el-form-item--feedback is-success">

            <el-input disabled v-model="form.schema.insurance_validate"></el-input>
          </el-form-item>


        </el-col>
        <el-col :span="8">
          <el-form-item label="发票">

            <el-input disabled v-model="form.schema.freight_invoice"></el-input>
          </el-form-item>
          <el-form-item label="发票">

            <el-input disabled v-model="form.schema.decoration_invoice"></el-input>
          </el-form-item>
          <el-form-item label="交强险">

            <el-input disabled v-model="form.schema.strong_insurance"></el-input>
          </el-form-item>
          <el-form-item label="商业险">

            <el-input disabled v-model="form.schema.commercial_insurance"></el-input>
          </el-form-item>
          <el-form-item label="可提高金额(g)">

            <el-input disabled v-model="form.schema.insurance_diff"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="采购附加费加融">

              <el-input disabled v-model="form.schema.buying_saling_fee_addition"></el-input>
            </el-form-item>
            <el-form-item label="运营成本费加融">

              <el-input disabled v-model="form.schema.decoration"></el-input>
            </el-form-item>
            <el-form-item label="加融校验(R)">

              <el-input disabled v-model="form.schema.financing_validate"></el-input>
            </el-form-item>




          </el-col>
          <el-col :span="8">

            <el-form-item label="其他附加费加融">

              <el-input disabled v-model="form.schema.other_fee_addition"></el-input>
            </el-form-item>
            <el-form-item label="进销税费成本加融">

              <el-input disabled v-model="form.schema.buying_selling_tax"></el-input>
            </el-form-item>
            <el-form-item label="可提高金额">

              <el-input disabled v-model="form.schema.financing_diff"></el-input>
            </el-form-item>

          </el-col>
        </el-row>



      </el-form>
      <h1>方案调整</h1>
      <!--//   upstream_invoice_type => invoice_type-->
      <!--//   invoice_price => x-->
      <!--//   upstream_invoice_price => invoice_price-->
      <!--//   sales_price => x-->
      <!--//   freight_invoice => 0-->
      <!--//   decoration_invoice => 0-->
      <!--//	invoice_validate => x-->
      <!--// invoice_tax_diff => x-->
      <!--// etc_fee => 0-->
      <!--//   + settled_invoice_price-->
      <el-form ref="form" :model="validate" label-width="140px" style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-row :gutter="12" style="margin-top: 20px">

          <el-col :span="8">

            <el-form-item label="首付" prop="checkPass">

              <el-input v-model="form.schema.first_payment"></el-input>
            </el-form-item>





          </el-col>
          <el-col :span="8">
            <el-form-item label="首付比例">

              <el-input disabled v-model="proportional"></el-input>
            </el-form-item>



          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">

            <el-form-item label="首年月供">

              <el-input v-model="form.schema.month_supply_1st_year"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尾款">

              <el-input v-model="form.schema.retainage"></el-input>
            </el-form-item>
          </el-col>




        </el-row>

        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="毛利润">

              <el-input disabled v-model="form.schema.gross_profit"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="新增加融">

              <el-input disabled v-model="form.schema.financing_addition"></el-input>
            </el-form-item>
          </el-col>


        </el-row>
        <!--新增加融-->
        <!--<el-row :gutter="12">-->
        <!---->
        <!--<el-col :span="8">-->
        <!--<el-button @click="financing_plus">+10</el-button>-->
        <!--<el-button @click="financing_minus">-10</el-button>-->
        <!--</el-col>-->


        <!--</el-row>-->

        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="新增加融校验">

              <el-input disabled v-model="form.schema.financing_addition_validate"></el-input>
            </el-form-item>





          </el-col>
          <el-col :span="8">

            <el-form-item label="可提高金额">

              <el-input v-model="form.schema.financing_addition_diff"></el-input>
            </el-form-item>


          </el-col>
        </el-row>

        <!--<el-row :gutter="12" style="margin-top: 20px">-->
          <!--<el-col :span="8">-->

            <!--<el-form-item label="新增加融校验">-->

              <!--<el-input disabled v-model="form.schema.financing_addition_validate"></el-input>-->
            <!--</el-form-item>-->





          <!--</el-col>-->
          <!--<el-col :span="8">-->

            <!--<el-form-item label="可提高金额">-->

              <!--<el-input v-model="form.schema.financing_addition_diff"></el-input>-->
            <!--</el-form-item>-->


          <!--</el-col>-->
        <!--</el-row>-->
        <el-row :gutter="12" style="margin-top: 20px">
          <el-col :span="8">

            <el-form-item label="加融限制内融资额">

              <el-input v-model="form.schema.total_financing_price_in_limit"></el-input>
            </el-form-item>





          </el-col>
          <el-col :span="8">

            <el-form-item label="超限额后融资总额">

              <el-input v-model="form.schema.need_financing_price"></el-input>
            </el-form-item>


          </el-col>
        </el-row>


        <el-form-item>
          <p>* 先验证才能审核通过</p>
          <el-button type="primary" :disabled="!vm.canVerify"  @click="verify">验证</el-button>
          <!--<el-button disabled type="success" :loading="vm.auditLoading" @click="audit">送审</el-button>-->
          <el-button :disabled="!vm.canAudit" @click="agree" type="success">审核通过</el-button>

          <!--<el-button :disabled="!vm.canAudit" type="success" :loading="vm.auditLoading" @click="audit">送审</el-button>-->
          <!--<el-button v-if="true" type="primary" loading="true">审核中</el-button>-->
          <el-button @click="vm.showRefuseText=true" type="danger">驳回</el-button>
          <el-input
            v-if="vm.showRefuseText"
            type="textarea"
            style="margin-top: 10px"
            :rows="2"
            placeholder="请输入驳回原因"
            v-model="vm.refuseText">
          </el-input>
          <el-button
            style="margin-top: 10px"
            v-if="vm.showRefuseText" :disabled="!vm.refuseText" @click="refuse" type="danger">确认驳回
          </el-button>

        </el-form-item>
      </el-form>

    </div>


  </div>
</template>

<script>
  import * as Schemas from '@/api/schemas'
  import * as Customs from '@/api/customs'

  function toPercent(point) {
    var str = Number(point * 100).toFixed(1);
    str += "%";
    return str;
  }
  export default{
    computed: {
      // 计算属性的 getter
      proportional: function () {
        // `this` 指向 vm 实例

        return toPercent(this.form.schema.first_payment / this.form.schema.market_price)
      }
    },
    // filters: {
    //   fixed(value) {
    //     return Number(value).toFixed(2)
    //   }
    // },
    // filters: {
    //   fixedNum(value) {
    //
    //     if (!value) {
    //       return ''
    //     };
    //     return Number(value).toFixed(2);
    //   }
    // },
//    filters: {
//      proportional: function (value) {
//        if (!value) return ''
//        return value/ this.form.schema.market_price
//     read: function(val) {
//       let nr = val/60;
//       if (val == 10){ nr = nr.toFixed(2); }
//       return nr;
//     },
//     // view -> model
//     // formats the value when writing to the data.
//     write: function(val, oldVal) {
//       let nr = parseFloat(val)*60;
//       return nr;
//     }
//
//      }
//    },
    data(){
      return{
        vm:{
          isEdit:false,
          schema:[],
          vehicle:[],
          threadMan:{name:'',phone:''},
          staff:{name:'',phone:''},
          custom:[],
          isLoading:false,
          isError:false,
          models:[],
          submit_time:'',
          canAudit:false,
          canVerify:true,
          message:'',
          auditLoading:false,
          agreeLoading: true,
          refuseText: '',
          showRefuseText: false

        },
        shop_name:'',
        sales_name:'',
        sales_phone:'',

        validate:{},

        form: {
          schema:{}
        }
      }
    },

    mounted() {
      if(this.$route.params.id>0){
        this.vm.isEdit=true;
        this.id=this.$route.params.id;
      }
      this.query();

    },
    methods: {

      refuse(){
        let that=this;
        Schemas.audit({id:that.id,type:0}).then(function(){
          that.$message({
            type: 'success',
            message: '拒绝审核成功!'
          });
          that.vm.auditLoading=false;
          that.$router.go(-1)

        }).catch(function(err){
          that.$message({
            type: 'warning',
            message: err
          });
          that.vm.auditLoading=false;

        });

      },
      agree(){

        let that=this;
        that.vm.agreeLoading=true
        Schemas.agree({audit_schema_id:that.id}).then(function(){
          that.$message({
            type: 'success',
            message: '送审成功!'
          });
          that.vm.agreeLoading=false;
          that.$router.go(-1)

        }).catch(function(err){
          that.$message({
            type: 'warning',
            message: err
          });
          that.vm.agreeLoading=false;

        });

      },
      audit(){
        let that= this;
        that.vm.auditLoading=true;

        Schemas.update(that.form.schema).then(function(){


          Schemas.audit({id:that.id,type:1}).then(function(){
            that.$message({
              type: 'success',
              message: '已提交审核!'
            });
            that.vm.auditLoading=false;
            that.$router.go(-1)


          }).catch(function(err){
            that.$message({
              type: 'warning',
              message: err
            });

            that.vm.auditLoading=false;

          });


        });

      },
      verify_pass(datas){
          let tip ='';

          if (datas.insurance_diff < 0) {
            tip += datas.insurance_validate + "：" + (-datas.insurance_diff) + "\n";
          }
          if (datas.financing_diff < 0) {
            tip += datas.financing_validate + "：" + (-datas.financing_diff) + "\n";
          }
          this.vm.message=tip;
          if(this.vm.message){
            return false
          }else{
            return true
          }
      },
      financing_plus(){

        this.form.schema.financing_addition=this.form.schema.financing_addition*1+10;
      }
     ,
      financing_minus(){

        this.form.schema.financing_addition=this.form.schema.financing_addition*1-10;
      },
      verify(){
        var that=this;
        that.vm.canVerify=false;
        Schemas.verify(that.form.schema).then(function(res){
          if(that.verify_pass(res.schema_detail)){
            Object.keys(res.schema_detail).forEach(function(key){
              that.form.schema[key]=res.schema_detail[key]
            });
            that.vm.canVerify=true;
            that.vm.canAudit=true;

//            that.audit();

          }else{
//            that.$confirm(that.vm.message,'方案校验',{
//              confirmButtonText: '确定',
//              cancelButtonText: '返回修改'
//            }).then(function(){
////              that.audit();
//              that.vm.canVerify=true;
//
//              that.vm.canAudit=true;
//
//            }).catch(function(){
//              that.vm.canAudit=true;
//              that.vm.canVerify=true;
//
//            });
            that.$alert(that.vm.message, '方案校验', {
                confirmButtonText: '确定',
                callback: function(){
                  that.vm.canVerify=true;
                  that.vm.canAudit=true;
                }
          });
          }



        });
      },
      onSubmit() {
        console.log('submit!');
      },

      query:function(){
        var that=this;
        Schemas.getIds({id:that.id}).then(function(res){
          that.vm.submit_time=res.submit_time;
          that.shop_name=res.shop_name;
          that.sales_name=res.sales_name;
          that.sales_phone=res.sales_phone;
//          店铺:{{shop_name}} 销售顾问:{{sales_name}} {{sales_phone}}
//           Customs.get({thread_id:res.thread_id}).then(function(data){
//             that.vm.threadMan=data;
//           }).then(function(){
//
//           });



          Schemas.get({id:res.schemas_id}).then(function(data){
            that.vm.schema=[data.schema];
            data.vehicle.retainage_of_evaluation  = data.schema.retainage_of_evaluation;
            that.vm.vehicle=[data.vehicle];

            let _form={
              schema:data.schema
            };

            _form.schema.wxxid=res.wxxid;
            _form.schema.thread_id=res.thread_id;
            _form.schema.schema_id=res.schema_id;
            _form.schema.model_id=data.vehicle.model_id;

            _form.schema.market_price=data.vehicle.market_price;
            _form.schema.model_price=data.vehicle.model_price;

            that.form=_form;
          }).catch(function(err){
            console.warn(err);
          });
//
          Customs.credit({wxxid:res.wxxid,custom_unionid:res.custom_unionid}).then(function(data){
            that.vm.custom=[data];
          }).catch(function(err){
          });



        });


      }



    }


  }
</script>
<style scoped>
.item-img{
  width: 60px;
  max-width: 60px;
  display: block;
}
</style>
